export default function show_loading() {
	const loading = document.getElementById('feidao-atom-loading');
	if (loading) {
		loading.style.display = 'block';
	} else {

		const style = `<style>
			.atom-timer {
				width: 44px;
				height: 44px;
				background-color: transparent;
				box-shadow: inset 0px 0px 0px 2px #fff;
				border-radius: 50%;
				position: relative;
				margin: 20% auto;
			}

			.atom-timer:after,
			.atom-timer:before {
				position: absolute;
				content: "";
				background-color: #fff;
			}

			.atom-timer:after {
				width: 20px;
				height: 2px;
				top: 21px;
				left: 21px;
				-webkit-transform-origin: 1px 1px;
				-moz-transform-origin: 1px 1px;
				transform-origin: 1px 1px;
				-webkit-animation: minhand 2s linear infinite;
				-moz-animation: minhand 2s linear infinite;
				animation: minhand 2s linear infinite;
			}

			.atom-timer:before {
				width: 18px;
				height: 2px;
				top: 21px;
				left: 21px;
				-webkit-transform-origin: 1px 1px;
				-moz-transform-origin: 1px 1px;
				transform-origin: 1px 1px;
				-webkit-animation: hrhand 8s linear infinite;
				-moz-animation: hrhand 8s linear infinite;
				animation: hrhand 8s linear infinite;
			}

			@-webkit-keyframes minhand {
				0% {
					-webkit-transform: rotate(0deg)
				}

				100% {
					-webkit-transform: rotate(360deg)
				}
			}

			@-moz-keyframes minhand {
				0% {
					-moz-transform: rotate(0deg)
				}

				100% {
					-moz-transform: rotate(360deg)
				}
			}

			@keyframes minhand {
				0% {
					transform: rotate(0deg)
				}

				100% {
					transform: rotate(360deg)
				}
			}

			@-webkit-keyframes hrhand {
				0% {
					-webkit-transform: rotate(0deg)
				}

				100% {
					-webkit-transform: rotate(360deg)
				}
			}

			@-moz-keyframes hrhand {
				0% {
					-moz-transform: rotate(0deg)
				}

				100% {
					-moz-transform: rotate(360deg)
				}
			}

			@keyframes hrhand {
				0% {
					transform: rotate(0deg)
				}

				100% {
					transform: rotate(360deg)
				}
			}
		</style>`;
		const html = `${style}<div id='feidao-atom-loading' style="background:rgba(0,0,0,.3);height:100%;width:100%;position:fixed;top:0;left:0;"><div class="atom-timer"></div></div>`;

		const container = window.document.createElement('div');
		container.style.position = 'fixed';
		container.style.zIndex = '10000';
		window.document.body.appendChild(container);
		container.insertAdjacentHTML('beforeend', html);
	}
}
